<template>
  <div class="container">
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="16" align="left">
        <el-input
          v-model="searchFrom.examineName"
          placeholder="考核名称"
          style="width: 150px; margin-right: 15px"
          @change="search"
          clearable
        />
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExportBtn()"  v-limit="'KHGL:KJKH:ZZKJKH:GDWNDKHGL:EXPORT'" > 批量导出</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="data.table_list"
        style="width: 100%"
        @selection-change="selectionChange"
        v-loading="data.table_loading"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :reserve-selection="false"
        />
        <el-table-column type="index" :index="indexMethod" align="center" label="序号" width="80" />
        <el-table-column prop="examineName" align="center" label="考核名称" width="250" />
        <el-table-column prop="age" align="center" label="年度" />
        <el-table-column prop="name" align="center" label="关联计划" />
        <el-table-column prop="companyCounts" align="center" label="考核子公司数" />
        <el-table-column prop="remark" align="center" label="备注" width="250" />
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template #default="scope">
            <span>
              <el-button type="primary" @click="goChildrenPlan(scope.row)"  v-limit="'KHGL:KJKH:ZZKJKH:GDWNDKHGL:VIEW'" >查看</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        :total="pageOption.total"
        :page-size="pageOption.size"
        :current-page="pageOption.current"
        @current-change="currentChange"
        layout="total, prev, pager, next, jumper"
        align="right"
      ></el-pagination>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
// import Table from '../../../components/indexTable.vue'
import pubFc from "@/views/examineManage/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../../api/zJexaminePlan";
interface Cdata {
  [propName: string]: any;
}
const searchFrom = reactive({
  //查询
  examineName: "",
});

const route = useRoute();
const router = useRouter();
// let annualId=route.query.id;
const pageOption = reactive({
  total: 0,
  current: 1,
  size: 10,
});
const assignParams = reactive({});
let data = reactive<Cdata>({
  table_list: [],
  handleRowData: null, //正在处理的行数据
  table_loading: false,
});
const dictDatas = reactive({}); //字典值
let selectedRows = ref<any>([]);
const search = () => {
  //搜索
  pageOption.current = 1;
  gettargetlist();
};

const getExportBtn = () => {
  ElMessageBox.confirm("确定要批量导出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
  //批量导出
  api
    .exportEveryExRequest({
      current: pageOption.current,
      size: pageOption.size,
      ...searchFrom,
      examineFlag: true,
    })
    .then((res) => {
      const { data, headers } = res;
      pubFc.downloadFunc(data, headers);
    });
  });
};
const indexMethod = (index)=>{
  return pageOption.size*(pageOption.current-1) +index+1
}
const selectionChange = (arr) => {
  //选中
  selectedRows.value = arr;
};
const currentChange = (page) => {
  //翻页
  pageOption.current = page;
  gettargetlist();
};
const handleDetect = () => {
  //批量删除
  if (selectedRows.value.length === 0) {
    ElMessage({
      message: "请选择数据后删除！",
      type: "warning",
    });
  } else if (selectedRows.value.length > 1) {
    ElMessage({
      message: "请选择一条数据！",
      type: "warning",
    });
  } else {
    ElMessageBox.confirm("确定要删除选中数据吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      api
        .deleteZzPlanRequest({
          id: selectedRows.value[0].id,
        })
        .then((res) => {
          if (res.data.code == 200) ElMessage.success("删除成功");
          gettargetlist();
        });
    });
  }
};

const goChildrenPlan = (row) => {
  //进入各单位考核列表
  router.push({
    path: "/examineManage/techExamine/zzExamine/eUnitExamine",
    query: {
      pid: row.id,
      name: row.examineName,
      aid: row.annualExamineId,
    },
  });
};
const gettargetlist = () => {
  //获取table列表
  data.table_loading = true;
  api
    .zzPlanlistRequest({
      ...searchFrom,
      current: pageOption.current,
      size: pageOption.size,
      examineFlag: true,
    })
    .then((res) => {
      data.table_loading = false;
      data.table_list = res.data.data.records;
      pageOption.total = res.data.data.total;
    });
};
gettargetlist();
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
  .annual-index-title {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e5e5;
    margin-bottom: 10px;
    font-size: 26px;
  }
}
:deep(.el-dialog__body) {
  padding: 0;
}
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f1eded;
}
</style>
